<template>
    <div>
        <vxe-modal v-model="modalShow" title="过滤方案编辑" width="700" height="600" show-zoom resize remember>
            <template #default>
                <div class="edit-title">
                    <div class="edit-title-itm">
                        <div>方案名称<vxe-input v-model="dataObj.name" placeholder="方案名称" size="mini"></vxe-input></div>
                        <div class="all"><el-switch @change="changAll" size="mini" v-model="all" active-text="全选"
                                inactive-text="取消">
                            </el-switch></div>
                    </div>
                    <div><vxe-button v-if="dataObj.grade != 'a'" @click="editPutEv" status="primary"
                            content="修改"></vxe-button><vxe-button @click="editPostEv" status="primary"
                            content="保存为新的方案"></vxe-button></div>
                </div>
                <div class="edit-content">
                    <div class="edit-content-itm" v-for="(itm, i) in dataObj.search" :key="i">
                        <div class="itm-label">
                            <el-checkbox size="mini" v-model="itm.select">启用过滤</el-checkbox>
                        </div>
                        <div class="itm-label">{{ itm.label }}</div>
                        <div class="itm-label">过滤类型</div>
                        <div class="itm-label"><vxe-radio :name="'n1' + i" v-model="itm.search_type" label="a" content="精确"
                                size="mini"></vxe-radio>
                            <vxe-radio :name="'n1' + i" v-model="itm.search_type" label="b" content="模糊"
                                size="mini"></vxe-radio>
                            <vxe-radio :name="'n1' + i" v-model="itm.search_type" label="c" content="范围"
                                size="mini"></vxe-radio>
                        </div>
                        <div class="itm-label">默认值
                        </div>
                        <div class="itm-label itm-label-input">
                            <span v-if="itm.type=='date'">
                                <vxe-input v-model="itm.def1" placeholder="默认值1" size="mini" transfer type="date" clearable></vxe-input>
                                <vxe-input v-if="itm.search_type == 'c'" v-model="itm.def2" placeholder="默认值2" size="mini" transfer type="date" clearable></vxe-input>
                            </span>
                            <span v-else>
                                <vxe-input v-model="itm.def1" placeholder="默认值1" size="mini"></vxe-input>
                                <vxe-input v-if="itm.search_type == 'c'" v-model="itm.def2" placeholder="默认值2" size="mini"></vxe-input>
                            </span>
                        </div>

                    </div>
                </div>
                <!-- {{ dataObj }} -->
            </template>
        </vxe-modal>
    </div>
</template>
  
<script >
export default {
    name: 'componentName',
    components: {},
    data() {
        return {
            all: true,
            modalShow: false,
            formData: {},
            formRules: {},
            // 字段列表
            dataObj: {},
        }
    },
    activated() {

    },
    mounted() {

    },
    methods: {
        changAll(val) {
            console.log(val);
            this.dataObj.search.forEach(element => {
                element.select = val
            });
        },
        // 父组件调用更新数据dataObj，selectDataList
        porpsDataEv(val1) {
            this.dataObj = JSON.parse(JSON.stringify(val1))
            this.modalShow = true
            console.log('子组件打印数据');
            console.log(this.dataObj);
        },
        // 新增过滤方案
        async editPostEv() {
            let postData = {}
            postData.id = this.dataObj.id
            postData.dj_id = this.dataObj.dj_id
            postData.grade = 'c'
            postData.name = this.dataObj.name
            postData.search = []
            this.dataObj.search.forEach(element => {
                if (element.select === true) {
                    postData.search.push(element)
                }
            });
            if (postData.search.length == 0) {
                this.$message.error('请选择过滤字段')
                return
            }
            try {
                let arr_data = await this.BaseDbSearchuPost('post', postData)
                if (arr_data.status == 202) return this.$message.error(arr_data.data.msg)
                if (arr_data.status !== 200) return this.$message.error('新增失败')
                await this.$emit('porpsDbSearchuFn')
                this.modalShow = false
                this.$message.success('新增成功')
            } catch (error) {
                this.$message.error('新增接口请求失败')
            }
        },
        // 修改过滤方案
        async editPutEv() {
            let putData = {}
            putData.id = this.dataObj.id
            putData.dj_id = this.dataObj.dj_id
            putData.grade = this.dataObj.grade
            putData.name = this.dataObj.name
            putData.search = []
            this.dataObj.search.forEach(element => {
                if (element.select === true) {
                    putData.search.push(element)
                }
            });
            if (putData.search.length == 0) {
                this.$message.error('请选择过滤字段')
                return
            }
            try {
                let arr_data = await this.BaseDbSearchuPut('put', putData)
                if (arr_data.status == 202) return this.$message.error(arr_data.data.msg)
                if (arr_data.status !== 200) return this.$message.error('修改失败')
                await this.$emit('porpsDbSearchuFn')
                this.modalShow = false
                this.$message.success('修改成功')
            } catch (error) {
                this.$message.error('修改接口请求失败')
            }
        }
    }
}
</script>
  
<style lang='less' scoped>
.edit-title {
    display: flex;
    justify-content: space-between;

    .edit-title-itm {
        height: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;

        .all {
            margin-left: 1rem;
        }
    }
}

.edit-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;



    .edit-content-itm {
        // height: 300px;
        width: 50%;
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #eaeefb;

        .itm-label {
            height: 30px;
            line-height: 30px;
        }

        .itm-label-input .vxe-input {
            width: 130px;
        }

        .el-checkbox__label {
            font-size: 10px;
        }
    }
}</style>